<template>
  <main>
    <header>
      <van-search shape="round" background="#E64A49" placeholder="请输入搜索关键词" @focus="toSearch" />
      <div class="swipe">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,inx) in swipeImgList" :key="inx">
            <img class="swipe-img" :src="item" alt />
          </van-swipe-item>
        </van-swipe>
      </div>
    </header>
    <div style="height: 2.2rem"></div>
    <ul class="cate">
      <li v-for="(item,inx) in cateImgList" :key="inx" @click="$router.push(item.redirectUrl)">
        <img :src="item.url" alt />
        <span>{{item.title}}</span>
      </li>
    </ul>
    <van-notice-bar
      text="足协杯战线连续第2年上演广州德比战,上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
      left-icon="volume-o"
      mode="closeable"
    />

    <div class="banner">
      <img src="https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/index_groupbuy_gg.png" alt />
    </div>
    <div class="coupon-list">
      <van-swipe :autoplay="0" width="160" :show-indicators="false">
        <van-swipe-item v-for="(item,inx) in couponList" :key="inx">
          <div class="coupon-box">
            <div class="left">
              <div class="amount">￥{{item.amount}}</div>
              <div class="condition">满{{item.conditionAmount}}元可用</div>
            </div>
            <div class="right">领 取</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="banner">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/489121f41279038693dbff01cbc03a1d.jpg?thumb=1&w=720&h=280"
        alt
        style="width: 100%"
      />
    </div>
    <div class="group-buy">
      <div class="group-buy-header">
        <b>团购专区</b>
        <div class="more">
          查看更多
          <div class="back">
            <van-icon name="upgrade" />
          </div>
        </div>
      </div>
      <div class="group-buy-content">
        <img
          src="https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420105351158735123104347_mid.jpg"
          alt
        />
        <div class="group-buy-content-right">
          <div class="group-buy-content-title">旋律风车2020春季新款韩版潮百搭宽松工装夹克男ins休闲上衣外套</div>
          <div class="group-buy-content-price">
            <div>
              原价：
              <del style="color: rgb(137, 137, 137)">¥200.00</del>
            </div>
            <div style="margin-left: .4rem">
              团购价：
              <span>¥150.00</span>
            </div>
          </div>
          <div style="text-align: right">
            <button class="round-btn">查看详情</button>
          </div>
        </div>
      </div>
    </div>
    <div class="second-kill">
      <div class="second-kill-header">
        <b>
          秒杀专区
          <span style="font-weight: normal">午场秒杀12:00~16:00</span>
        </b>

        <div class="more" @click="toSecKill">
          更多秒杀
          <div class="back">
            <van-icon name="upgrade" />
          </div>
        </div>
      </div>
      <div class="second-kill-content">
        <van-swipe :autoplay="0" width="98" :show-indicators="false">
          <van-swipe-item v-for="(item,inx) in secondKillList" :key="inx">
            <div
              style="display: flex;flex-direction: column;align-items: center;padding: .4rem .4rem .2rem"
            >
              <img :src="item.url" alt style="width: 100%" />
              <span style="font-size: .65rem;color: #ff0036">￥{{item.amount}}</span>
              <del style="font-size: .6rem;color: #898989">￥{{item.delAmount}}</del>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="fight-group">
      <div class="fight-group-header">
        <b>拼团专区</b>
        <div class="more">
          好友都在拼
          <div class="back">
            <van-icon name="upgrade" />
          </div>
        </div>
      </div>
      <div class="fight-group-content">
        <ul>
          <li v-for="(item,key) in fightGroupList" :key="key">
            <div class="fight-group-box">
              <img :src="item.url" alt />
              <b class="fight-group-title">{{item.title}}</b>
              <div style="padding: .2rem 0">
                <a class="fight-group-num">{{item.num}}人团</a>
              </div>
              <span style="color: #ff0036;font-size: .7rem">￥{{item.amount}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="cate-goods">
      <div class="cate-goods-header">
        <img src="https://uniapp.b2b2c.niuteam.cn//upload/uniapp/index/title_left.png" alt />
        <span style="font-size:.7rem;padding:0 .4rem">『服饰』</span>
        <img src="https://uniapp.b2b2c.niuteam.cn//upload/uniapp/index/title_right.png" alt />
      </div>
      <div class="cate-goods-content">
        <ul>
          <li v-for="(item,key) in cateGoodsList" :key="key">
            <div class="cate-goods-box">
              <img :src="item.url" alt />
              <b
                style="display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
              >{{item.title}}</b>
              <div style="display:flex;justify-content:space-between">
                <span style="color:#ff0036;font-weight:600">￥{{item.amount}}</span>
                <span style="color:#898989;font-size:.6rem">包邮</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </main>
</template>

<script>
import { Search, Swipe, SwipeItem, NoticeBar, Icon } from "vant";

export default {
  components: {
    "van-search": Search,
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem,
    "van-notice-bar": NoticeBar,
    "van-icon": Icon
  },
  methods: {
    toSearch() {
      this.$router.push("/main/search");
    },
    toSecKill() {
      this.$router.push("/activity/sec-kill/index");
    }
  },
  data() {
    return {
      swipeImgList: [
        `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ff3e608e7f4587b5bf62ea59efaf26e9.jpg?thumb=1&w=720&h=360`,
        `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b9b4dbb30c6d0f0e7ab96302e111a18a.jpg?thumb=1&w=720&h=360`,
        `https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bd7349fbb622ef89d3837327be4b3682.jpg?thumb=1&w=720&h=360`
      ],
      cateImgList: [
        {
          title: "拼团",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/pintuan.png`,
          redirectUrl: "/activity/fight-group/index"
        },
        {
          title: "团购",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/group_buy.png`,
          redirectUrl: "activity/group-buy/index"
        },
        {
          title: "秒杀",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/seckill.png`,
          redirectUrl: "activity/sec-kill/index"
        },
        {
          title: "积分商城",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/point.png`
        },
        {
          title: "专题活动",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/topic.png`
        },
        {
          title: "品牌专区",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/brand.png`
        },
        {
          title: "发现",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/shop_street.png`
        },
        {
          title: "领劵",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/coupon.png`
        },
        {
          title: "公告",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/notice.png`
        },
        {
          title: "帮助",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/default/diy_view/nav/help.png`
        }
      ],
      couponList: [
        {
          amount: 200,
          conditionAmount: 500
        },
        {
          amount: 100,
          conditionAmount: 300
        },
        {
          amount: 50,
          conditionAmount: 150
        },
        {
          amount: 100,
          conditionAmount: 600
        },
        {
          amount: 150,
          conditionAmount: 500
        }
      ],
      secondKillList: [
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420115613158735497306210_mid.jpg`,
          amount: "45.00",
          delAmount: "50.00"
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420115612158735497285781_mid.jpg`,
          amount: "45.00",
          delAmount: "50.00"
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420102738158734965884973_mid.jpg`,
          amount: "300.00",
          delAmount: "350.00"
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420121957158735639732995_mid.jpg`,
          amount: "150.00",
          delAmount: "200.00"
        }
      ],
      fightGroupList: [
        {
          title: "2020年夏新款粉色网纱草莓亮片荷叶边系带短袖V领度假长裙",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420102738158734965884973_mid.jpg`,
          amount: "300.00",
          num: 2
        },
        {
          title: "向日葵花束生日配送鲜花速递",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420115612158735497285781_mid.jpg`,
          amount: "45.00",
          num: 4
        },
        {
          title: "连衣裙2020春夏新款法国设计感小众气质舒适中长款修身收腰衬衫裙",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420103609158735016910945_mid.jpg`,
          amount: "325.00",
          num: 1
        },
        {
          title: "2020年夏新款粉色网纱草莓亮片荷叶边系带短袖V领度假长裙",
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420102738158734965884973_mid.jpg`,
          amount: "330.00",
          num: 3
        }
      ],
      cateGoodsList: [
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200430/20200430061400158824164087315_mid.jpg`,
          title: "汉服女 古装仙女广袖流仙裙交领齐腰超仙飘逸清新淡雅演出服",
          amount: "399.00"
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420121957158735639725255_mid.jpg`,
          title: "西西里男装春季男士黑色夹克外套男韩版潮流帅气休闲宽松连帽皮衣",
          amount: "199.00"
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420105351158735123104347_mid.jpg`,
          title: "旋律风车2020春季新款韩版潮百搭宽松工装夹克男ins休闲上衣外套",
          amount: "229.00"
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420104549158735074918885_mid.jpg`,
          title: "怒推进店闭眼入口碑款挚爱宽松休闲洋气高品质显肤奶油绿王炸卫衣",
          amount: "200.00"
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420103609158735016910945_mid.jpg`,
          title: "连衣裙2020春夏新款法国设计感小众气质舒适中长款修身收腰衬衫裙",
          amount: "660.00"
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420102738158734965884973_mid.jpg`,
          title: "2020年夏新款粉色网纱草莓亮片荷叶边系带短袖V领度假长裙",
          amount: "420.00"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
header {
  position: relative;
  background: #e64a49;
  padding: 0.4rem 0;
  height: 8rem;

  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2rem;
    border-radius: 50%;
    background: #e64a49;
    bottom: -1rem;
  }
}

.round-btn {
  background-color: #ff0036;
  color: white;
  border-radius: 0.5rem;
  border: none;
  font-size: 0.65rem;
  padding: 0.2rem 0.6rem;
}

.swipe {
  height: 8rem;
  width: 90%;
  position: absolute;
  z-index: 10;
  left: 5%;
  border-radius: 0.75rem;
  overflow: hidden;

  .swipe-img {
    width: 100%;
    display: block;
    border-radius: 0.75rem;
  }
}

.cate {
  display: flex;

  flex-wrap: wrap;
  font-size: 0.65rem;
  background-color: white;
  border-radius: 0.5rem;
  margin: 0.4rem;

  li {
    text-align: center;
    width: 20%;
    padding: 0.3rem 0;

    img {
      margin: 0 auto;
      width: 80%;
      display: block;
    }
  }
}

.banner {
  margin: 0.4rem 0.4rem 0;

  img {
    width: 100%;
  }
}

.more {
  color: #ff0036;
  display: flex;

  .back {
    transform: rotate(90deg);
    font-size: 0.7rem;
  }
}

.group-buy {
  background-color: white;
  padding: 0.5rem 0.4rem;

  .group-buy-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    padding-bottom: 0.5rem;
  }

  .group-buy-content {
    display: flex;
    padding: 0.4rem;
    border: 1px solid #e7e7e7;
    border-radius: 0.2rem;
    height: 4.8rem;

    img {
      width: 4.8rem;
    }

    .group-buy-content-right {
      margin-left: 0.4rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .group-buy-content-title {
      word-break: break-word;
      font-size: 0.65rem;
      font-weight: bold;
    }

    .group-buy-content-price {
      font-size: 0.65rem;
      display: flex;
    }
  }
}

.second-kill {
  margin-top: 0.4rem;
  background-color: white;
  padding: 0.5rem 0.4rem;

  .second-kill-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    padding-bottom: 0.5rem;
  }
}

.fight-group {
  margin-top: 0.4rem;
  background-color: white;
  padding: 0.5rem 0.4rem;

  .fight-group-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    padding-bottom: 0.5rem;
  }

  .fight-group-content {
    ul {
      display: flex;
      flex-wrap: wrap;

      li {
        box-sizing: border-box;
        width: 50%;
        font-size: 0.65rem;
        margin-bottom: 0.4rem;

        &:nth-child(odd) {
          padding-right: 0.2rem;
        }

        &:nth-child(even) {
          padding-left: 0.2rem;
        }

        .fight-group-box {
          padding: 0.4rem;
          border-radius: 0.5rem;
          box-shadow: #ccc 0 0 3px;
        }

        img {
          width: 100%;
          display: block;
        }

        .fight-group-title {
          text-overflow: ellipsis;
          overflow: hidden;
          display: block;
          white-space: nowrap;
        }

        .fight-group-num {
          box-sizing: border-box;
          color: white;
          background-color: #ff0036;
          padding: 0.2rem 0.5rem;
          border-radius: 0.2rem;
        }
      }
    }
  }
}

.coupon-list {
  padding: 0.4rem 0.4rem;
  background-color: white;

  .coupon-box {
    display: flex;
    margin: 0.2rem;
    background-color: rgb(255, 102, 134);
    border-radius: 0.6rem;
    color: white;
    height: 3.5rem;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: calc(100% - 1.8rem);

      .amount {
        font-size: 1.2rem;
      }

      .condition {
        margin-top: 0.2rem;
        font-size: 0.6rem;
      }
    }

    .right {
      width: 1.8rem;
      line-height: 1.4rem;
      text-align: center;
      font-size: 0.7rem;
      border-left: 1px dashed white;
      writing-mode: vertical-lr;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: white;
        left: -0.5rem;
        top: -0.5rem;
      }

      &::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: white;
        left: -0.5rem;
        bottom: -0.5rem;
      }
    }
  }
}
.cate-goods {
  margin-top: 0.3rem;
  padding: 0.4rem;
  background-color: white;
  .cate-goods-header {
    display: flex;
    justify-content: center;
    img {
      width: 0.7rem;
      height: 0.6rem;
    }
  }
  .cate-goods-content {
    ul {
      margin-top: 0.2rem;
      display: flex;
      flex-wrap: wrap;
      li {
        box-sizing: border-box;
        width: 50%;
        padding: 0.4rem;
        .cate-goods-box {
          font-size: 0.7rem;
          img {
            width: 100%;
            display: block;
          }
          padding: 0.4rem;
          border-radius: 0.5rem;
          box-shadow: #ccc 0 0 3px;
        }
      }
    }
  }
}
</style>
